<script>
import axios from 'axios'

const TrWrapper = (h, vm) => {
  const trArr = []
  const dikeInfoArr = [
    [
      { title: '堤名', key: 'dike_name' },
      { title: '镇(街)', key: 'town' }
    ], [
      { title: '村居', key: 'village' },
      { title: '捍卫面积(万亩)', key: 'area' }
    ], [
      { title: '堤长', key: 'dike_length' },
      { title: '堤高', key: 'dike_height' }
    ]
  ]

  dikeInfoArr.map(trItem => {
    const td = []
    trItem.map(tdItem => {
      td.push(h('td', {}, tdItem.title))
      td.push(h('td', {}, vm.fliterData(tdItem.key)))
    })

    trArr.push(
      h('tr', {}, td)
    )
  })

  return trArr
}

const TableWrapper = (h, vm) => {
  return h('div', {
    class: 'GykjMap-banks-table'
  }, [
    h('table', {
      attrs: {
        border: true
      },
      class: 'GykjMap-table'
    }, [
      h('tbody', {}, TrWrapper(h, vm))
    ])
  ])
}

const Loading = (h, vm) => {
  const divArr = []
  for (let index = 0; index < 8; index++) {
    divArr.push(h('div', {}))
  }

  return h('div', { class: vm.loading ? 'GykjMap-loading-box' : 'GykjMap-loading-box hide' }, [
    h('div', { class: 'GykjMap-loading-wrapper' }, [
      h('div', { class: 'GykjMap-loading-content' }, [
        h('div', { class: 'loader' }, [
          h('div', { class: 'loader-inner ball-spin-fade-loader' }, divArr)
        ])
      ]),
      h('div', { class: 'GykjMap-loading-title' }, '加载中')
    ])
  ])
}

export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    isInit: {
      type: Boolean,
      default: false
    }
  },
  created () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      loading: false
    }
  },
  render (h) {
    return (
      h('div', {
        class: 'GykjMap-banks'
      }, [
        TableWrapper(h, this),
        Loading(h, this)
      ])
    )
  },
  methods: {
    getResultData () {
      return this.resultData
    },
    initData (name) {
      this.resultData = {}
      this.api = 'http://183.238.82.216:9080/fullservice/http/dikeInfo'

      if (name) {
        this.api += `?name=${name}`
      } else {
        if (this.source) {
          this.api = this.source
        } else if (!this.source && this.name) {
          this.api += `?name=${this.name}`
        } else {
          throw new Error('必须传入api源地址或堤围名称')
        }
      }

      this.getData()
    },
    getData () {
      this.loading = true

      axios.get(this.api, {name})
        .then(res => {
          this.loading = false
          const data = res.data

          if (data.code === '0000' && data.result.length) {
            this.resultData = data.result[0]
          } else {
            this.$emit('data_err', '找不到该堤围数据')
            console.log('找不到该堤围数据')
          }
        })
        .catch(err => {
          this.loading = false
          this.$emit('data_err', `获取该数据源失败，错误代码：${err}`)
          console.log(`获取该数据源失败，错误代码：${err}`)
        })
    },
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    }
  }
}
</script>

<style scoped lang="scss">
.GykjMap-banks {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 5px;
  .GykjMap-banks-table {
    width: 100%;
    height: 100%;
    .GykjMap-table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        width: 25%;
        padding: 5px;
      }
    }
  }

  .GykjMap-loading-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    user-select: none;
    &.hide {
      display: none;
    }
    .GykjMap-loading-wrapper {
      width: 80px;
      height: 80px;
      padding: 10px 0;
      background-color: rgba(0, 0, 0, .6);
      border-radius: 5px;
      position: absolute;
      box-sizing: border-box;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      color: white;
      text-align: center;
      .GykjMap-loading-content {
        width: 100%;
        text-align: center;
        .loader {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          flex: 0 1 auto;
          flex-direction: column;
          flex-grow: 1;
          flex-shrink: 0;
          flex-basis: 25%;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 0;
          right: 0;
          top: -10px;
          margin: auto;
          transform: scale(0.35);
        }
        @-webkit-keyframes ball-spin-fade-loader {
          50% {
              opacity: 0.3;
              -webkit-transform: scale(0.4);
              transform: scale(0.4);
          }
          100% {
              opacity: 1;
              -webkit-transform: scale(1);
              transform: scale(1);
          }
        }
        @keyframes ball-spin-fade-loader {
          50% {
              opacity: 0.3;
              -webkit-transform: scale(0.4);
              transform: scale(0.4);
          }
          100% {
              opacity: 1;
              -webkit-transform: scale(1);
              transform: scale(1);
          }
        }
        .ball-spin-fade-loader {
          position: relative;
        }
        .ball-spin-fade-loader > div:nth-child(1) {
          top: 32px;
          left: -12px;
          -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
          animation: ball-spin-fade-loader 1s 0s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(2) {
          top: 17.04545px;
          left: 17.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
          animation: ball-spin-fade-loader 1s 0.12s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(3) {
          top: -12px;
          left: 32px;
          -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
          animation: ball-spin-fade-loader 1s 0.24s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(4) {
          top: -40.04545px;
          left: 17.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
          animation: ball-spin-fade-loader 1s 0.36s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(5) {
          top: -52px;
          left: -12px;
          -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
          animation: ball-spin-fade-loader 1s 0.48s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(6) {
          top: -40.04545px;
          left: -40.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
          animation: ball-spin-fade-loader 1s 0.6s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(7) {
          top: -12px;
          left: -52px;
          -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
          animation: ball-spin-fade-loader 1s 0.72s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(8) {
          top: 17.04545px;
          left: -40.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
          animation: ball-spin-fade-loader 1s 0.84s infinite linear;
        }
        .ball-spin-fade-loader > div {
          background-color: #fff;
          width: 15px;
          height: 15px;
          border-radius: 100%;
          margin: 2px;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          position: absolute;
        }
      }
      .GykjMap-loading-title {
        width: 100%;
        position: absolute;
        bottom: 2px;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
